const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
// const CopyPlugin = require('copy-webpack-plugin')
// const ImageminPlugin = require('imagemin-webpack-plugin').default
const { extendDefaultPlugins } = require('svgo')

module.exports = (env) => {
  const mode = env.production ? 'production' : 'development'

  return {
    entry: { home: path.resolve('src/pages/home/index.js') },
    output: {
      path: path.resolve('dist'),
      filename: '[name].[chunkhash].js',
    },
    mode,
    resolve: {
      alias: {
        '@static': path.resolve('static'),
      },
    },
    module: {
      rules: [
        {
          test: /\.less$/i,
          use: [
            // 解析less 并抽离css,开发环境用syle-loader便于热更新
            env.production ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'less-loader',
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
              },
            },
            {
              loader: 'image-webpack-loader',
            },
          ],
        },
      ],
    },
    plugins: [
      // 清空dist(打包文件夹)下所有文件
      new CleanWebpackPlugin(),
      // 创建HTML页面,webpack output主要负责提取压缩的js文件,需要用这个插件生成HTML文件
      new HtmlWebpackPlugin({
        filename: `index.html`, //生成的文件名
        template: `./src/pages/home/index.html`, //文件模板不穿会生成一个默认Body内容为空的HTML文件
        inject: true,
        title: 'webpack5',
        favicon: path.resolve(__dirname, 'static/ico/favicon.ico'),
        chunks: ['home'], // chunks为该页面要包含的js文件
      }),
      // new HtmlWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:8].css',
      }),
      // 根据实际情况使用
      // new CopyPlugin({
      //   patterns: [
      //     {
      //       from: 'static',
      //       to: 'static',
      //     },
      //   ],
      // }),
      // 放在CopyPlugin之后可以压缩copy的图片资源
      //  new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
    ],
    optimization: {
      minimize: true,
      minimizer: [
        new CssMinimizerPlugin({}),
        new TerserJSPlugin({
          terserOptions: {
            format: {
              comments: false,
            },
            compress: {
              drop_console: true, // 默认false，设置为true, 则会删除所有console.* 相关的代码。
            },
          },
          extractComments: false,
        }),
      ],
    },
    devServer: {
      // watchFiles: ['src', 'static'],
      hot: true,
      compress: true,
      port: 8000,
      open: true,
    },
  }
}
